<!-- AI 模型反馈区域 -->
<div class="flex-1 flex flex-col">
    <div class="p-6 border-b border-gray-100">
        <h3 class="text-lg font-medium text-gray-900 mb-2">AI 模型反馈</h3>
        <div class="flex items-center space-x-2 text-sm text-gray-600">
            <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
            <span>模型状态：正常运行</span>
        </div>
    </div>

    <!-- 进度指示器 -->
    <div x-show="isGenerating" class="p-6 border-b border-gray-100">
        <div class="flex justify-between text-sm text-gray-600 mb-2">
            <span>生成进度</span>
            <span x-text="progress + '%'"></span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2">
            <div 
                class="bg-primary h-2 rounded-full transition-all duration-500"
                :style="`width: ${progress}%`"
            ></div>
        </div>
        <p class="text-sm text-gray-500 mt-2" x-text="currentStep"></p>
    </div>

    <!-- 实时反馈日志 -->
    <div class="flex-1 p-6 overflow-hidden">
        <h4 class="text-sm font-medium text-gray-700 mb-3">实时反馈</h4>
        <div class="space-y-2 max-h-full overflow-y-auto">
            <template x-for="log in logs" :key="log.id">
                <div class="flex items-start space-x-2 p-3 rounded-md" :class="getLogStyle(log.type)">
                    <i :class="getLogIcon(log.type)" class="mt-0.5 text-sm flex-shrink-0"></i>
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-medium" x-text="log.message"></p>
                        <p class="text-xs opacity-75 mt-1" x-text="log.timestamp"></p>
                        <div x-show="log.details" class="mt-2 text-xs bg-white/50 rounded p-2" x-text="log.details"></div>
                    </div>
                </div>
            </template>
            
            <div x-show="logs.length === 0" class="text-center py-12 text-gray-400">
                <i class="fas fa-robot text-2xl mb-3"></i>
                <p class="text-sm">AI 等待您的需求描述...</p>
                <p class="text-xs mt-1">输入详细需求后，我将为您实时反馈创作过程</p>
            </div>
        </div>
    </div>
</div> 